import React from "react";
import { useNavigate } from "react-router-dom";
import our from "./../../assets/img/icon/our.svg";
import role from "./../../assets/img/icon/role.svg";
import why from "./../../assets/img/icon/why.svg";
import build from "./../../assets/img/icon/build.svg";
import qa from "./../../assets/img/icon/qa.svg";
import "./TopMenus.css";

function TopMenus() {
  let navigate = useNavigate();
  const notNavigate = [
    "/DetailStudent",
    "/SingleRole",
    "/DetailCouple",
    "/Sterile",
  ];
  function pathSwitch(path = `/Detail`, id) {
    let pathExtra = id === 0 ? "?id=" + id : "?id=" + id + "#" + (id - 1);
    navigate(path + pathExtra);
    if ((path + pathExtra).includes("#") && !notNavigate.includes(path)) {
      setTimeout(() => {
        goAnchor(id - 1);
      }, 500);
    }
  }
  function goAnchor(index) {
    let param = {
      behavior: "smooth",
      block: "start",
    };
    if (index) {
      document.querySelector(`a[name="${index}"]`)?.scrollIntoView(param);
    }
  }
  const menuDatas = [
    {
      title: "關於我們",
      icon: our,
      children: [
        {
          title: "計劃背景與目標",
          path: "/DetailOur",
          id: 1,
        },
        {
          title: "我們的成員及合作夥伴",
          path: "/DetailOur",
          id: 2,
        },
        {
          title: "聯絡我們",
          path: "/DetailOur",
          id: 3,
        },
      ],
    },
    {
      title: "選擇角色",
      icon: role,
      children: [
        {
          title: "戴學新",
          path: "/DetailStudent",
          id: 1,
        },
        {
          title: "單生仁",
          path: "/SingleRole",
          id: 2,
        },
        {
          title: "連清夫婦",
          id: 3,
          path: "/DetailCouple",
        },
        {
          title: "畢育夫婦",
          path: "/Sterile",
          id: 4,
        },
      ],
    },
    {
      title: "關於生育這回事",
      icon: why,
      children: [
        {
          title: "香港生育趨勢",
          path: "/About",
          id: 1,
        },
        {
          title: "生育的迷思",
          path: "/About",
          id: 2,
        },
        {
          title: "爲什麽生育與你有關",
          path: "/About",
          id: 3,
        },
        {
          title: "什麽是不育",
          path: "/About",
          id: 4,
        },
        {
          title: "生育選項你要知",
          path: "/About",
          id: 5,
        },
      ],
    },
    {
      title: "關係建立",
      icon: build,
      children: [
        {
          title: "愛人前先瞭解自己",
          path: "/Relation",
          id: 1,
        },
        {
          title: "愛情親密有妙計",
          path: "/Relation",
          id: 2,
        },
        {
          title: "求孕伴侶密密談",
          path: "/Relation",
          id: 3,
        },
      ],
    },
    {
      title: "生育健康心理輔導",
      icon: qa,
      children: [
        {
          title: "計劃養育下一代",
          path: "/DetailTutor",
          id: 1,
        },
        {
          title: "不育治療的複雜情緒",
          path: "/DetailTutor",
          id: 2,
        },
        {
          title: "生育健康心理輔導服務介紹",
          path: "/DetailTutor",
          id: 3,
        },
      ],
    },
  ];

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        padding: "30px 80px",
        position: "absolute",
        width: "100%",
        boxSizing: "border-box",
        zIndex: 8,
      }}
    >
      <div className="menu-bg"></div>
      <div style={{ display: "flex" }}>
        {menuDatas.map((i, x) => {
          const { title, icon, children } = i;
          return (
            <div key={x}>
              <div
                style={{ display: "flex", position: "relative" }}
                className="topMenus-div-style"
              >
                <img
                  className="mr10"
                  alt=""
                  src={icon}
                  style={{ zIndex: "5", width: "30px", height: "30px" }}
                />
                <div
                  className="mr20"
                  style={{ zIndex: "3", lineHeight: "30px" }}
                >
                  {title}
                </div>
                <div className="menu-list">
                  {children &&
                    children.map((o, c) => {
                      const { title, path, id } = o;
                      return (
                        <div
                          key={x + "" + c}
                          className={"menu-item-box"}
                          style={{ display: "flex" }}
                        >
                          <div
                            style={{ whiteSpace: "nowrap" }}
                            className={"cursor-pointer menu-item"}
                            onClick={() => pathSwitch(path, id)}
                          >
                            {title}
                          </div>
                        </div>
                      );
                    })}
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ display: "flex" }}>
        <div className="mr10 cursor-pointer">{"Eng"}</div>
        <div className="mr10 cursor-pointer">{"手機版"}</div>
        <div className="mr10 cursor-pointer">{"刷新"}</div>
      </div>
    </div>
  );
}

export default TopMenus;
